/* pages/consumCenter/index.wxss */
page {
	background-color: #ea350e;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
}

.bg-box {
	position: relative;
	width: 100vw;
	height: 450rpx;
	overflow: hidden;

	.img {
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		width: 100vw;
		height: 1932rpx;
	}
}

.ul {
	padding: 32rpx 32rpx;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 24rpx 30rpx;

	.li {
		position: relative;
		width: 328rpx;
		height: 430rpx;
		padding: 64rpx 30rpx 12rpx;
		box-sizing: border-box;

		.shopbg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: -1;
		}

		.title {
			position: absolute;
			top: 0;
			left: 50%;
			transform: translateX(-50%);
			width: 138rpx;
			height: 40rpx;
			line-height: 40rpx;
			border-radius: 0rpx 0rpx 18rpx 18rpx;
			background-color: #FFC66BFF;
			font-size: 20rpx;
			color: #B5623BFF;
			text-align: center;
		}

		.price-box {
			color: red;
			text-align: center;
			font-size: 24rpx;
			color: #D7865FFF;
			padding-bottom: 26rpx;
			border-bottom: 2rpx dashed #FFC474FF;

			.price {
				color: #FF4133FF;
				font-size: 92rpx;
				font-weight: bold;

				.currency {
					font-size: 40rpx;
				}
			}
		}

		.btn-time-box {
			margin-top: 22rpx;
			text-align: center;
			font-size: 20rpx;
			color: #D7865FFF;

			.btn-box {
				width: 180rpx;
				height: 56rpx;
				border-radius: 30rpx;
				font-size: 24rpx;
				padding: 0;
				margin-bottom: 10rpx;
			}

			.btn-text {
				display: flex;
				align-items: center;
			}

			.receive-icon {
				display: inline-block;
				width: 24rpx;
				height: 24rpx;
				border-radius: 50%;
				background-color: #FFF1DCFF;
				position: relative;
				margin-left: 12rpx;

				&::after {
					content: '';
					position: absolute;
					top: 50%;
					left: 50%;
					width: 14rpx;
					height: 14rpx;
					box-sizing: border-box;
					border: 2rpx solid #FCCA7EFF;
					border-width: 2rpx 2rpx 0 0;
					transform: translateY(-50%) translateX(-75%) rotate(45deg);
					transform-origin: center;
				}
			}
		}
	}
}

.popup-box {
	width: 490rpx;
	// height: 306rpx;
	background: linear-gradient(180deg, #FFF0DC 0%, #FFE9C7 100%, #7F7567 100%);
	border: 2rpx solid #FFCB78;
	padding: 24rpx;
	font-size: 32rpx;

	.title {
		color: #D7865FFF;
		text-align: center;
	}

	.content {
		width: 290rpx;
		color: #312E2BFF;
		margin: 46rpx auto 56rpx;
	}

	.btn-box {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.confim {
			color: #B60102FF;
		}

		.cancel {
			color: white;
		}

		button {
			width: 216rpx;
			height: 72rpx;
			background-color: #FFD684;
			border-radius: 36rpx;
			font-size: 28rpx;
		}
	}
}